<template>
  <div class="report-form">
    <div class="report-form-content">
      <div class="report-form-content-title">
        <h1 style="font-weight: bold" v-if="oper === 'add'">新增事前用款申请单</h1>
        <h1 style="font-weight: bold" v-if="oper === 'edit'">修改事前用款申请单</h1>
        <h1 style="font-weight: bold" v-if="oper === 'view'">查看事前用款申请单</h1>
      </div>
      <el-form class="my-form"
               ref="obj"
               :model="obj"
               :rules="rules"
               label-position="right"
               label-width="auto"
               label-suffix="："
               :disabled="oper === 'view'">
        <div style="text-align: right;">
          <div class="tabs-list">
            <el-button type="success" @click="handleSave('obj')">
              <svg-icon icon-class="save" />
              保存
            </el-button>
            <el-button v-show="checkAuthByCode('')" type="primary" @click="handleSubmit('obj')" v-if="obj.id">
              <svg-icon icon-class="submit" />
              提交审批
            </el-button>
          </div>
        </div>
        <div>
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="事前用款申请单录入" name="1"></el-tab-pane>
            <el-tab-pane label="附件" name="2"></el-tab-pane>
          </el-tabs>
          <div class="tabs-list" v-show="activeName === '1'">
            <el-row :gutter="20">
              <el-col :sm="24" :lg="24" style="padding-left: 20px">
                <div class="" style="display: flex;align-items: center;justify-content: space-between;">
                  <div></div>
                  <div class="report-form-list-content-1 aggregate" v-if="finalAvailableAmount != null">最大可申请金额: ￥{{ finalAvailableAmount < 0 ? 0 : finalAvailableAmount }}</div>
                </div>
                <el-drawer v-model="expenditureKpiDrawer" title="指标单详情">
                  <div class="report-form-list-content report-form-list-content-be">
                    <el-form label-suffix="：">
                      <el-form-item label="预算年度">
                        <span>{{ expenditureKpiObj.year }}</span>
                      </el-form-item>
                      <el-form-item label="支出类型">
                            <span>
                              <DictTag :dict-list="getDictList('ExpenditureKpiPayType')" :dict-key="expenditureKpiObj.payType" />
                            </span>
                      </el-form-item>
                      <el-form-item label="经费类型">
                            <span>
                              <DictTag :dict-list="getDictList('ExpenditureKpiFundType')" :dict-key="expenditureKpiObj.fundType" />
                            </span>
                      </el-form-item>
                      <el-form-item label="预算总金额">
                        <MoneyTag :money="expenditureKpiObj.amount" />
                      </el-form-item>
                      <el-form-item label="可用金额">
                        <MoneyTag :money="expenditureKpiObj.availableAmount" />
                      </el-form-item>
                      <el-form-item label="项目负责人部门">
                            <span>
                              <LabelTag :foreignList="organizationList" :foreignIds="expenditureKpiObj.organizationId" :foreignLabel="'organizationName'" />
                            </span>
                      </el-form-item>
                      <el-form-item label="项目负责人">
                            <span>
                              <LabelTag :foreignList="userList" :foreignIds="expenditureKpiObj.managerId" :foreignLabel="'name'" />
                            </span>
                      </el-form-item>
                      <el-form-item label="功能分类">
                        <span>{{ showIdLabel(expenditureFunctionalList, expenditureKpiObj.expenditureFunctionalId, 'name') }}</span>
                      </el-form-item>
                      <el-form-item label="财政项目">
                        <span>{{ showIdLabel(expenditureFiscalList, expenditureKpiObj.expenditureFiscalId, 'name') }}</span>
                      </el-form-item>
                      <el-form-item label="指标来源">
                            <span>
                              <DictTag :dict-list="getDictList('ExpenditureKpiSource')" :dict-key="expenditureKpiObj.source" />
                            </span>
                      </el-form-item>
                      <el-form-item label="项目类型">
                        <span>{{ showIdLabel(expenditurePtypeList, expenditureKpiObj.expenditurePtypeId, 'name') }}</span>
                      </el-form-item>
                      <el-form-item label="指标单状态">
                            <span>
                              <EnumTag :enum-list="getEnumList('ExpenditureKpiState')" :enum-key="expenditureKpiObj.state" />
                            </span>
                      </el-form-item>
                      <el-form-item label="按经济分类控制金额">
                            <span>
                              <EnumTag :enum-list="getEnumList('CommonYesNo')" :enum-key="expenditureKpiObj.isEconomic" />
                            </span>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-drawer>
              </el-col>
              <el-col :sm="24" :lg="24" style="padding-left: 20px">
                <el-card class="update-log">
                  <div class="report-form-list-content-1">
                    <div class="report-form-list-content">
                      <el-form-item label="申请单号" prop="applicationCode">
                        <el-input v-model="obj.applicationCode" placeholder="自动生成" disabled />
                      </el-form-item>
                      <el-form-item label="申请日期" prop="applicationDate">
                        <el-date-picker v-model="obj.applicationDate" type="date" placeholder="请选择" value-format="YYYY-MM-DD" />
                      </el-form-item>
                      <el-form-item label="申请人部门" prop="applicationOrganizationId">
                        <Organization v-model="obj.applicationOrganizationId" keyName="id" keyShow="organizationName" placeholder="申请人部门" title="部门查询" />
                      </el-form-item>
                      <el-form-item label="申请人用户" prop="applicationUserId">
                        <User v-model="obj.applicationUserId" keyName="id" keyShow="name" placeholder="申请人用户" title="用户查询" />
                      </el-form-item>
                      <el-divider />

                      <el-form-item label="用款申请单类型" prop="applicationType">
                        <el-select v-model="obj.applicationType" class="m-2" placeholder="请选择">
                          <el-option v-for="item in getDictList('ExpenditureApplicationType')" :key="item.key" :label="`${item.key} - ${item.value}`" :value="item.key" />
                        </el-select>
                      </el-form-item>
                      <div class="report-form-list-content-1">
                        <el-form-item label="请款事项" prop="items">
                          <el-input v-model="obj.items" placeholder="请输入请款事项" />
                        </el-form-item>
                      </div>
                      <div class="report-form-list-content-1">
                        <el-form-item label="支出事由" prop="reason">
                          <el-input v-model="obj.reason" placeholder="请输入支出事由" />
                        </el-form-item>
                      </div>
                      <el-divider />
                      <el-form-item prop="expenditureKpiId">
                        <el-button type="primary" icon="search" @click="chooseExpenditureKpi">选择指标单</el-button>
                      </el-form-item>
                      <el-form-item>
                        <el-button :disabled="!expenditureKpiObj.id" style="margin-left: 16px" @click="expenditureKpiDrawer = true">
                          <svg-icon icon-class="view" />查看详情
                        </el-button>
                      </el-form-item>
                      <el-divider />
                      <el-form-item label="指标编码">
                        <span>{{ expenditureKpiObj.kpiCode }}</span>
                      </el-form-item>
                      <el-form-item label="指标名称">
                        <span>{{ expenditureKpiObj.kpiName }}</span>
                      </el-form-item>
                      <!--
                      <el-form-item label="可用金额" v-if="getEnv() === 'local'">
                        <span v-if="expenditureKpiObj.kpiCode">￥{{ expenditureKpiObj.availableAmount }}</span>
                      </el-form-item>
                      -->
                      <el-divider />

                      <el-form-item label="经济分类" prop="expenditureEconomicId">
                        <el-cascader v-model="obj.expenditureEconomicId"
                                     :options="arrChangeTreeFn(expenditureEconomicList)"
                                     :props="{label: 'name', value: 'id'}"
                                     :show-all-levels="false"
                                     @change="changeExpenditureEconomicId"
                                     clearable
                                     filterable>
                          <template #default="{ data }">
                            <span>{{ data.code }}</span>
                            <span style="padding: 0 5px">-</span>
                            <span>{{ data.name }}</span>
                          </template>
                        </el-cascader>
                      </el-form-item>
                      <!--
                      <el-form-item label="可用金额" v-if="getEnv() === 'local'">
                        <span v-if="available">￥{{ available }}</span>
                      </el-form-item>
                      -->
                      <el-form-item label="申请金额" prop="amount">
                        <el-input-number v-model="obj.amount" placeholder="申请金额" :precision="2" />
                      </el-form-item>

                    </div>

                    <div class="report-form-list-content-1">
                      <el-form-item label="备注" prop="remark">
                        <el-input v-model="obj.remark" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" class="textarea-1" />
                      </el-form-item>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-divider />
          </div>
          <div class="tabs-list" v-show="activeName === '2'">
            <!-- 附件信息 -->
            <div class="file-list-btn">
              <span class="file-list-btn-span">*温馨提示:保存成功后才能预览word文档和Excel报表</span>
              <div class="file-list-btns">
                <el-button type="primary" plain style="margin-right:1rem;" @click="selectAttachmentBtn"><svg-icon icon-class="search" />选择已上传的文件</el-button>
                <FileUpload :isShowTip="false" v-model="oFiles" :isShowFileList="false" @uploadedSuccess="uploadedSuccessFn" />
              </div>
            </div>
            <el-table :data="oFiles"
                      style="width: 100%; margin-top: 20px"
                      row-key="id"
                      border
                      default-expand-all
                      @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" />
              <el-table-column label="附件类型">
                <template v-slot="{row}">
                  <el-form-item prop="attachmentType">
                    <el-select v-model="row.attachmentType" class="m-2" placeholder="请选择">
                      <el-option v-for="item in getDictList('ExpenditureApplicationFileType')" :key="item.key" :label="`${item.key} - ${item.value}`" :value="item.key" />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="original" label="附件名称" />
              <el-table-column align="center" label="操作" width="160px" fixed="right">
                <template #default="scope">
                  <el-button type="primary" link @click="downloadFile(scope.row)">下载</el-button>
                  <el-button type="primary" link @click="viewFile(scope.row)">预览</el-button>
                  <el-button type="danger" link @click="removeFile(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-form>
    </div>
    <selectExpenditureKpiList v-model:itemsVisible="itemsVisible" @close="itemsVisible = false" @expenditureKpiSelect="changeExpenditureKpi"></selectExpenditureKpiList>
    <selectApprove v-model:itemsVisible="dialogApproveVisible" @close="dialogApproveVisible = false" :business="'2004'" :businessId="obj.id" @doSubmit="doSubmit" />
    <el-dialog v-model="selectAttachmentVisible" title="选择附件" width="70%" top="2vh">
      <selectAttachmentMultiple :isVisible="selectAttachmentVisible" @selectAttachment="selectAttachmentFn" @close="selectAttachmentVisible = false"></selectAttachmentMultiple>
    </el-dialog>
    <el-dialog v-model="attachmentVisible" title="附件预览" width="70%" top="2vh">
      <attachmentPreview v-model:attachmentId="fileId" />
      <div style="text-align:right;">
        <el-button type="danger" @click="attachmentVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import baseConfig from '@/mixins/baseConfig'
import {doGet, doPost, doDownload, doDelete} from '@/config/http'
import {
  alertErrorMsg,
  arrChangeTreeFn,
  customValidator,
  getEnv,
  getListPageSize, isNullOrUndefined,
  notifySuccess, showIdLabel,
  svc,
  initListUpdate
} from "@/config/common";
import selectApprove from '@/views/components/base/selectApprove.vue'
import selectExpenditureKpiList from '@/views/components/expenditure/selectExpenditureKpiList.vue'
import selectAttachmentMultiple from '@/views/components/base/selectAttachmentMultiple.vue'
import {parseTime} from "@/utils/ruoyi";
import {getUserId} from "@/config/cookie";
import useUserStore from "@/store/modules/user";
import SvgIcon from "@/components/SvgIcon/index.vue";
import attachmentPreview from '@/views/components/base/attachmentPreview.vue'
import User from "@/views/components/base/selectUser.vue";
import Organization from "@/views/components/base/selectOrganization.vue";
import initListStore from '@/store/modules/initList'

const emptyObj = {
  expenditureKpiId: null, // 指标单表ID
  applicationCode: null, // 申请单号
  applicationDate: parseTime(new Date().getTime(), '{y}-{m}-{d}'), // 申请日期
  applicationOrganizationId: useUserStore().organization.id, // 申请人部门
  applicationUserId: getUserId(), // 申请人用户
  expenditureEconomicId: null, // 经济分类
  applicationType: null, // 用款申请单类型
  amount: 0, // 申请金额
  items: null, // 请款事项
  reason: null, // 支出事由
  state: null, // 状态
  remark: null, // 备注
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null,
  approveId: null
}

export default {
  name: 'expenditureApplicationEdit_nocache',
  mixins: [baseConfig],
  components: {
    Organization,
    User,
    SvgIcon,
    selectApprove,
    selectExpenditureKpiList,
    selectAttachmentMultiple,
    attachmentPreview
  },
  data() {
    return {
      obj: Object.assign({}, emptyObj),
      routes: [],
      oper: null,
      id: null,
      activeName: '1',
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      itemsVisible: false,
      dialogApproveVisible: false,
      selectAttachmentVisible: false,
      approveList: [],
      rules: {
        expenditureKpiId: [{ required: true, validator: customValidator, min: 1, max: 100, label: '指标单', trigger: ['blur', 'change'] }],
        applicationCode: [{ required: false, validator: customValidator, min: 0, max: 100, label: '申请单号', trigger: ['blur', 'change'] }],
        applicationDate: [{ required: true, validator: customValidator, min: 0, max: 100, label: '申请日期', trigger: ['blur', 'change'] }],
        applicationOrganizationId: [{ required: true, validator: customValidator, min: 0, max: 20, label: '申请人部门', trigger: ['blur', 'change'] }],
        applicationUserId: [{ required: true, validator: customValidator, min: 0, max: 20, label: '申请人用户', trigger: ['blur', 'change'] }],
        expenditureEconomicId: [{ required: false, validator: customValidator, min: 0, max: 200, label: '经济分类', trigger: ['blur', 'change'] }],
        applicationType: [{ required: true, validator: customValidator, min: 0, max: 100, label: '用款申请单类型', trigger: ['blur', 'change'] }],
        amount: [{ required: true, validator: customValidator, min: 0, max: 13, label: '申请金额', trigger: ['blur', 'change'] }],
        items: [{ required: true, validator: customValidator, min: 0, max: 0, label: '请款事项', trigger: ['blur', 'change'] }],
        reason: [{ required: true, validator: customValidator, min: 0, max: 0, label: '支出事由', trigger: ['blur', 'change'] }],
        state: [{ required: false, validator: customValidator, min: 0, max: 100, label: '状态', trigger: ['blur', 'change'] }],
        remark: [{ required: false, validator: customValidator, min: 0, max: 0, label: '备注', trigger: ['blur', 'change'] }],
      },
      governmentList: initListStore().governmentList,
      organizationList: initListStore().organizationList,
      userList: initListStore().userList,
      expenditurePtypeList: initListStore().expenditurePtypeList,//项目类型
      expenditureFunctionalList: initListStore().expenditureFunctionalList,//功能分类
      expenditureEconomicList: initListStore().expenditureEconomicList,//经济分类
      expenditureFiscalList: initListStore().expenditureFiscalList,//财政项目
      expenditureSubjectList: initListStore().expenditureSubjectList,//会计科目
      oFiles: [],
      expenditureKpiObj: {
        kpiCode: null, // 指标编码
        kpiName: null, // 指标名称
        kpiDate: null, // 单据日期
        year: null, // 预算年度
        payType: null, // 支出类型
        fundType: null, // 经费类型
        amount: null, // 预算总金额
        organizationId: null, // 部门ID
        managerId: null, // 项目负责人用户ID
        expenditurePtypeId: null, // 项目类型ID
        expenditureFunctionalId: null, // 功能分类ID
        expenditureFiscalId: null, // 财政项目ID
        source: null, // 指标来源
        state: null, // 状态
        isEconomic: null, // 按经济分类控制金额
      },
      expenditureKpiDrawer: false,
      available: '', //按经济分类的可用金额
      approveNodeList: [],
      emptyApproveNode: {
        approveNodeSource: '2',
        approveNodeName: '审批节点1',
        approveNodeType: '2',
        approveNodeOrgId: null,
        approveNodeRoleId: null,
        approveNodeUserId: null,
        approveNodeNo: 1,
        isCountersign: '0', // 是否会签节点
      },
      fileId: '',
      attachmentVisible: false,
    }
  },
  computed: {
    routesData() {
      return this.routes
    },
    finalAvailableAmount() {
      if (isNullOrUndefined(this.expenditureKpiObj.availableAmount)) {
        return null
      }
      let r = this.expenditureKpiObj.availableAmount
      if (!isNullOrUndefined(this.available)) {
        r = Math.min(r, this.available)
      }
      return r
    },
  },
  created() {
    this.initObj()
    // this.initList()
  },
  methods: {
    showIdLabel,
    getEnv,
    arrChangeTreeFn,
    // async initList() {
    //   let p1 = doGet(svc, '/government/page', {pageSize: getListPageSize()}, false)
    //   let p2 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false)
    //   let p3 = doGet(svc, '/user/page', {pageSize: getListPageSize()}, false)
    //   let p4 = doGet(svc, '/expenditure-ptype/page', {pageSize: getListPageSize()}, false)
    //   let p5 = doGet(svc, '/expenditure-functional/page', {pageSize: getListPageSize()}, false)
    //   let p6 = doGet(svc, '/expenditure-economic/page', {pageSize: getListPageSize()}, false)
    //   let p7 = doGet(svc, '/expenditure-fiscal/page', {pageSize: getListPageSize()}, false)
    //   let p8 = doGet(svc, '/expenditure-subject/page', {pageSize: getListPageSize()}, false)
    //   let resArray = await Promise.all([p1, p2, p3, p4, p5, p6, p7, p8])
    //   this.governmentList = resArray[0]['records']
    //   this.organizationList = resArray[1]['records']
    //   this.userList = resArray[2]['records']
    //   this.expenditurePtypeList = resArray[3]['records']
    //   this.expenditureFunctionalList = resArray[4]['records']
    //   this.expenditureEconomicList = resArray[5]['records']
    //   this.expenditureFiscalList = resArray[6]['records']
    //   this.expenditureSubjectList = resArray[7]['records']
    // },
    async initObj() {
      this.oper = this.$route.query.oper
      this.id = null
      if (this.$route.query.id) {
        this.id = this.$route.query.id
        this.obj = await doGet(svc, `/expenditure-application/${this.id}`, {}, true)
        this.obj.expenditureEconomicId = this.obj.expenditureEconomicId.split(',')
        this.oFiles = await doGet(svc, '/expenditure-application-file/listByField', {field: 'expenditureApplicationId', values: this.id}, false)
        this.oFiles = this.oFiles.map(item => {
          item.original = item.attachmentName
          return item
        })
        if (this.obj.expenditureKpiId) {
          this.expenditureKpiObj = await doGet(svc, '/expenditure-kpi/' + this.obj.expenditureKpiId, {}, false)
          this.expenditureKpiObj.availableAmount = await doGet(svc, '/customExpenditureKpis/queryExpenditureKpiAvailableAmount', {expenditureKpiId: this.obj.expenditureKpiId}, false)
          await this.changeExpenditureKpi(this.expenditureKpiObj)
          this.changeExpenditureEconomicId()
        }
      }
    },
    chooseExpenditureKpi() {
      this.itemsVisible = true
    },
    async changeExpenditureKpi(data) {
      this.expenditureKpiObj = data
      this.obj.expenditureKpiId = data.id
      this.rules.expenditureEconomicId[0].required = false
      this.expenditureEconomicList = []
      this.available = null
      if (this.expenditureKpiObj.isEconomic === '1') {
        let expenditureKpiItemList = await doGet(svc, '/expenditure-kpi-item/listByField', {
          field: 'expenditureKpiId',
          values: this.obj.expenditureKpiId
        }, false)
        let expenditureEconomicIds = []
        expenditureKpiItemList?.map(item => {
          item.expenditureEconomicId.split(',').map(m => {
            if (!expenditureEconomicIds.includes(m)) {
              expenditureEconomicIds.push(m)
            }
          })
        })
        this.expenditureEconomicList = await doGet(svc, '/expenditure-economic/ids', {ids: expenditureEconomicIds.join(',')}, false)
        this.rules.expenditureEconomicId[0].required = true
      }
    },
    async handleSave(formName) {
      let v = await this.$refs[formName].validate().catch((err)=>{return err})
      if (v !== true) {
        alertErrorMsg('表单验证不通过，请检查数据。')
        return
      }
      let o = this.buildObj()
      doPost(svc, '/customExpenditureExpenses/saveExpenditureApplication', o, true).then(() => {
        notifySuccess('操作成功')

        this.$confirm('保存成功。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(_ => {
          doDelete(this.svc, '/department-performance/' + row.id, {}).then(() => {
            notifySuccess('操作成功')
            this.getList()
            this.dialogVisible = false
          })
        }).catch(e => {
          console.error(e)
        })

        this.goTargetByName('expenditureApplication', {}, true)
        this.dialogViewVisible = false
      })
    },
    async handleSubmit(formName) {
      let v = await this.$refs[formName].validate().catch((err)=>{return err})
      if (v !== true) {
        alertErrorMsg('表单验证不通过，请检查数据。')
        return
      }
      let o = this.buildObj()
      doPost(svc, '/customExpenditureExpenses/saveExpenditureApplication', o, false).then(res => {
        this.obj.id = res['id']
        this.obj.version = res['version']
        this.dialogApproveVisible = true
      })
    },
    async doSubmit(data) {
      const formName = 'obj'
      let v = await this.$refs[formName].validate().catch((err)=>{return err})
      if (v !== true) {
        alertErrorMsg('表单验证不通过，请检查数据。')
        return
      }
      let o = this.buildObj()
      o.approveId = data.approveId
      o.approveNodes = data.approveNodes
      doPost(svc, '/customExpenditureExpenses/submitExpenditureApplication', o).then(() => {
        notifySuccess('提交成功')
        initListUpdate('expenditureApplicationList', '/expenditure-application/page')
        this.goTargetByName('expenditureApplication', {}, true)
        this.dialogViewVisible = false
      })
    },
    buildObj() {
      let o = this.obj
      //files
      o.files = []
      if (this.oFiles.length > 0) {
        console.debug('this.oFiles',this.oFiles)
        o.files = this.oFiles.map(item => {
          console.debug('item',item)
          if (this.obj.id) {
            return {
              attachmentId: item.id,
              attachmentName: item.original,
              attachmentType: item.attachmentType,
              expenditureApplicationId: this.obj.id
            }
          } else {
            return {
              attachmentId: item.id,
              attachmentName: item.original,
              attachmentType: item.attachmentType,
            }
          }
        })
      }
      console.debug('this.obj.expenditureEconomicId',this.obj.expenditureEconomicId)
      o.expenditureEconomicId = Array.isArray(this.obj.expenditureEconomicId) ? this.obj.expenditureEconomicId.join(',') : this.obj.expenditureEconomicId
      console.debug('o-------------',o)
      return o
    },
    handlePreview(data) {
      console.debug(data)
    },
    beforeRemove(data) {
      console.debug(data)
    },
    handleRemove(data) {
      console.debug(data)
    },
    handleSelectionChange(data) {
      console.debug(data)
    },
    downloadFile(row) {
      console.debug('row-------------',row)
      if (row.attachmentId) {
        doDownload(svc, '/customAttachment/download/' + row.attachmentId, {})
      } else {
        doDownload(svc, '/customAttachment/download/' + row.id, {})
      }
    },
    viewFile(row) {
      this.attachmentVisible = true
      setTimeout(() => {
        if (row.attachmentId) {
          this.fileId = row.attachmentId
        } else {
          this.fileId = row.id
        }
      },100)
    },
    removeFile(scope) {
      this.oFiles.splice(scope.$index, 1)
    },
    selectAttachmentBtn() {
      this.selectAttachmentVisible = true
    },
    selectAttachmentFn(list) {
      if (list.length > 0) {
        list.forEach(item => {
          item.original = item.fileName
          item.size = item.fileSize
          this.oFiles.push(item)
        })
      }
      this.oFiles = Array.from(new Set(this.oFiles))
    },
    uploadedSuccessFn(file) {
      console.debug('file-----------',file)
      this.oFiles.push(file)
    },
    changeExpenditureEconomicId() {
      let o = this.obj.expenditureEconomicId
      if (o.length > 0) {
        let para = {
          expenditureKpiId: this.obj.expenditureKpiId,
          expenditureEconomicId: Array.isArray(o) ? o.join(",") : o,
          useFluctuateStr: "false",
        }
        doGet(svc, '/customExpenditureKpis/queryExpenditureKpiAvailableAmount', para, false).then(res => {
          this.available = res
        })
      }
    },
  }
}
</script>
<style scoped>
.report-form {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 10;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}
.report-form-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-list-btn {
  display: flex;
  /* display: flex; */
  align-items: center;
  justify-content: space-between
}
.update-log {
  width: 100%;
  margin: 30px 0;
}
.file-list-btns {
  display: flex;
  align-items: center;
}
.file-list-btn-span {
  color: #F56C6C;
  font-size: 12px;
}
</style>
